<template>

  <div class="bg">
    <Top></Top>
    <div class="entity-item">
      <el-container>

        <el-aside width="150px">
          <el-row :span="4">
            <el-button size="large" @click="toManagerQuestion">问题管理</el-button>
          </el-row>
          <el-row :span="4">
            <el-button size="large" @click="toManagerAnswer">回答管理</el-button>
          </el-row>
          <el-row :span="4">
            <el-button size="large" @click="toManagerEssay">文章管理</el-button>
          </el-row>
          <el-row :span="4">
            <el-button size="large" type="primary" @click="toManagerUser">用户管理</el-button>
          </el-row>
<!--          <div >-->
<!--            <el-button size="large">问题管理</el-button>-->
<!--            <el-button size="large">问题管理</el-button>-->
<!--            <el-button size="large">问题管理</el-button>-->
<!--            <el-button size="large">问题管理</el-button>-->
<!--            <el-button size="large">问题管理</el-button>-->
<!--          </div>-->
        </el-aside>
        <el-container>
          <el-header >
            <el-row>
              <el-col :span="1">
              </el-col>
              <el-col :span="4">
                <el-text > 一共{{this.maxCount}}条数据 </el-text>
              </el-col>
              <el-col :span="4">
                <el-input v-model="query"></el-input>
              </el-col>
              <el-col :span="1">
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="queryUserList"> 搜索 </el-button>
              </el-col>
            </el-row>
          </el-header>
          <el-main>
            <el-table :data="userList" border="true" stripe="true" max-height="600" height="600">

              <el-table-column prop="nickname" label="用户名" width="180" fixed="left">
              </el-table-column>
              <el-table-column prop="userId" label="用户ID" width="100">
              </el-table-column>
              <el-table-column prop="createTime" label="注册时间" width="100">
              </el-table-column>
              <el-table-column prop="questionCount" label="提问数量" width="100">
              </el-table-column>
              <el-table-column prop="answerCount" label="回答数量" width="100">
              </el-table-column>
              <el-table-column prop="essayCount" label="发文数量" width="100">
              </el-table-column>
              <el-table-column label="操作" width="140" class="cantClick" fixed="right">
                <template #default="scope">
                  <el-row>
                    <el-col :span="4">
                    </el-col>
                    <el-col :span="4">
                      <el-button type="text" @click="deleteOneById(scope.row.userId)"> 删除 </el-button>
                    </el-col>
                    <el-col :span="4">
                    </el-col>
                  </el-row>
                </template>

              </el-table-column>
            </el-table>
          </el-main>
          <el-footer class="footer">
            <el-row>
              <el-col :span="4">
                <el-text type="text"> 一共{{ this.pageCount }}页 </el-text>
              </el-col>
              <el-col :span="4">
                <el-button type="text" @click="getFirstList"> 返回首页 </el-button>
              </el-col>
              <el-col :span="4">
                <el-button type="text" @click="getBackList"> 上一页 </el-button>
              </el-col>
              <el-col :span="4">
                <el-text type="text" > 当前在第{{ this.pageNo }}页 </el-text>
              </el-col>
              <el-col :span="4">
                <el-button type="text" @click="getNextList"> 下一页 </el-button>
              </el-col>
              <el-col :span="4">
                <el-button type="text" @click="getLastList"> 去末页 </el-button>
              </el-col>
            </el-row>
          </el-footer>
        </el-container>


      </el-container>

    </div>
  </div>

</template>

<script>
import Top from "@/components/Top";
import axios from "@/settings/axios";
import {ElMessage} from "element-plus";
import {successedOutVOHandle} from "@/utils/CommonUtils";
import router from "@/router";



export default {
  name: "UserInfo",
  components: {Top},
  data() {
    return {
      sysUser: {},
      userList :[],
      treeLabelList: [],
      query: "",
      pageNo: 1,
      pageSize: 10,
      maxCount: 0,
      pageCount: 0,
      showLabelInfoDialog: false,
      showAddLabelDialog: false,
      nowLabelInfo: {},
      newLabelInfoId: "",
      nowUserId: "",

    }
  },
  async mounted() {
    // 获取用户列表
    await this.getUserList();
    /* 获取用户个数和分页个数 */
    await this.setCountAndPageCount(this.userList);
    // 获取标签树形结构
    await this.setTreeLabelList();
  },
  methods: {
    async getUserList() {
      let params = {
        "content": this.query,
        "pageNo": this.pageNo,
        "pageSize": this.pageSize
      }
      let userList = await axios.get("/shane_admin/user_manager_list", params);
      console.log(userList);
      this.userList = userList;
    },
    async getNextList() {
      if (this.pageNo >= this.pageCount) {
        ElMessage({
          showClose: true,
          message: "已经是最后一页咯！",
          type: 'success',
          center: true,
        });
        return false;
      }
      this.pageNo += 1;
      await this.getUserList();
    },
    async getBackList() {
      if (this.pageNo > 1) {
        this.pageNo -= 1;
        await this.getUserList();
      }
      else {
        ElMessage({
          showClose: true,
          message: "已经是第一页咯！",
          type: 'success',
          center: true,
        });
      }

    },
    async getFirstList() {
      this.pageNo = 1;
      await this.getUserList();
    },
    async getLastList() {
      this.pageNo = this.pageCount;
      await this.getUserList();
    },
    async setCountAndPageCount() {
      let params = {
        "content": this.query
      }
      let countAndPage = await axios.get("/shane_admin/user_manager_count_and_page_by_content", params);

      this.maxCount = countAndPage.maxCount;
      this.pageCount = countAndPage.pageCount;
      console.log(countAndPage);
      return countAndPage;

    },
    async queryUserList() {
      if (this.query === "") {
        return false;
      }
      this.pageNo = 0;
      this.pageSize = 10;

      await this.getUserList();
      await this.setCountAndPageCount();
    },
    async deleteOneById(id) {
      let params = {
        "id": id
      };
      let deleteOutVO = await axios.post("/shane_admin/delete_one_user_by_id", params);
      successedOutVOHandle(deleteOutVO);
      await this.getUserList();
    },
    toUserInfo(userId) {
      let params = {
        "userId": userId
      };
      let routeData =router.resolve({
        path: "/user/info",
        query: params
      });
      window.open(routeData.href, '_blank')
    },
    toManagerQuestion() {
      router.push("/admin/question");
    },
    toManagerAnswer() {
      router.push("/admin/answer");
    },
    toManagerEssay() {
      router.push("/admin/essay");
    },
    toManagerUser() {
      router.push("/admin/user");
    },
  },
};
</script>

<style scoped>

body {
  background-color: #f0f0f0; /* 这里可以设置你想要的颜色 */

}

.bg{
  background-color: rgb(255, 255, 255);

}

.entity-item {
  padding: 40px;

}

.userInfo {
  color: #f0f0f0;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.userImage {
  display: flex;
  flex-direction: column;  /* 上下排列 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 20px;
}

.userImage > div {
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}

.otherInfo {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.infoItem {
  display: flex;
  flex-direction: row;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 5px;
}

.tripText {
  display: flex;
  width: 10vw;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

user-info {
  display: flex;
}

.cantClick {
  pointer-events:none;
}
.footer {
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
.navigation {
  flex-direction: column;  /* 上下排列 */
  justify-content: center; /* 水平居中 */
  /*align-items: center; !* 垂直居中 *!*/
  margin-bottom: 20px;
}

</style>
